<template>
<div class="loginAndResiger">
  <div class="tab">
    <span class="active">登录</span>
    <span @click="$router.push({name:'resiger'})">注册</span>
  </div>
  <div class="label">
    <input type="text" class="input" v-model="username">
    <i class="el-icon-user-solid picon" ></i>
  </div>
  <div class="label">
    <input type="password" class="input" v-model="password">
    <i class="el-icon-unlock picon"></i>
  </div>
  <div class="label">
    <input type="password" class="input" v-model="validCode">
    <i class="el-icon-mobile-phone picon"></i>
    <div class="erweiCode">
      <img :src="imgBase64" @click="getDigitalCaptcha" alt="" />
    </div>
  </div>
  <div class="label">
    <span class="forget" @click="$router.push({name:'fogetPassword'})">忘记密码？</span>
  </div>
  <div class="label">
    <div class="submit flex-center" v-loading="loading">
      <span @click="submit">登 录</span>
    </div>
  </div>


</div>
</template>

<script>
export default {
  name: "loginAndResiger",
  data() {
    return {
      imgBase64: "",
      username: "",
      password: "",
      rememberme: 0,
      validCode: "",
      loading: false,
      isHidden: true,
    };
  },
  methods: {
    keyup(e) {
      if (e.keyCode == 13) {
        this.login();
      }
    },
    getDigitalCaptcha() {
      this.$api.getDigitalCaptcha().then((res) => {
        window.biyiCaptchaKey = Object.keys(res)[0];
        this.imgBase64 = res[window.biyiCaptchaKey];
      });
    },
    login() {
      this.loading = true;
      window.biyiCaptcha = this.validCode;
      let params = {
        username: this.username,
        password: this.password,
        validCode: this.validCode,
        data: this.data,
        rememberme: this.rememberme,
      };
      this.$api
          .login(params)
          .then((res) => {
            this.loading = false;
            this.$store.dispatch("setIsLogin", true);
            localStorage.setItem("token", res.token);
            this.$api.getUser({}).then((res) => {
              this.$store.dispatch("setUserInfo", res.data);
              localStorage.setItem("userInfo", JSON.stringify(res.data));
            });
          })
          .catch((err) => {
            this.loading = false;
            this.getDigitalCaptcha();
          });
    },
    submit() {
      this.login();
    },
  },
  mounted() {
    this.getDigitalCaptcha();
  },
}
</script>

<style scoped lang="less">
.loginAndResiger{
  position: relative;
  z-index:999;
  width: 312px;
  height: 292px;
  padding: 24px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0px 3px 7px 0px rgba(116,116,116,0.35);
  border-radius: 16px;
  .forget{
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    display: inherit;width: 100%;
    text-align: right;
    color: #999999;
    cursor: pointer;
  }
  .tab{
    display: flex;
    justify-content: space-between;
    padding: 0 60px;
    .active{
      border-bottom: 2px solid #0F47B8;
    }
    span{
      cursor: pointer;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #0F47B8;
      display: inline-block;
      padding: 0 20px;
      padding-bottom: 10px;
    }
  }
  .input {
    outline: none;
    width: calc(100% - 80px);
    padding: 0 40px;
    border: 1px solid #EEEEEE;
    height: 40px;
    background: #FFFFFF;
    border-radius: 4px;

    &:focus {
      border: 1px solid #237ef7;
    }
  }
  .label {
    //width: calc(100% - 40px);
    padding: 15px 0px 0;
    position: relative;
    i{
      font-size: 20px;
      color: #AAAAAA ;
    }

    .picon {
      position: absolute;
      top: 26px;
      left: 18px;
    }

    .eye {
      position: absolute;
      top: 38px;
      right: 20px;
      cursor: pointer;
    }

    .erweiCode {
      width: 90px;
      height: 39px;
      position: absolute;
      top: 16px;
      right: 0px;
      cursor: pointer;

      img {
        width: 100%;
        height: 39px;
      }
    }
  }

  .submit {

    width: 100%;

    height: 40px;
    background: #0B4AC0;
    box-shadow: 0px 5px 7px 0px rgba(24, 122, 251, 0.36);
    border-radius: 4px;
    color: white;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 10px;
    cursor: pointer;
    position: relative;

    &:hover {
      box-shadow: none;
    }

    span {
      display: inline-block;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 45px;
    }
  }
}
</style>